<template>
	<div id="back_to_article_record" v-loading="$store.state.saving"
				element-loading-text="保存中" element-loading-spinner="el-icon-loading"
				element-loading-background = "rgba(255,255,255,0.8)">
		<el-form label-width="110px" class="demo-ruleForm" style="overflow:hidden" 
			:model="returnRecord" ref="refReturnRecord" :rules="rulesReturnRecord">
			<el-form-item label="客户">
				<el-input disabled v-model="contract.customer.customerName"></el-input>
			</el-form-item>
			<el-form-item label="合同名称">
				<el-input disabled v-model="contract.contractNum"></el-input>
			</el-form-item>
			<el-form-item label="期次"  class="inline__">
				<el-input disabled v-model="returnMon.returnTimes.name"></el-input>
			</el-form-item>
            <el-form-item label="日期" prop="realReturnDate" class="inline__">
                <el-date-picker v-model="returnRecord.realReturnDate" type="date" style="width:100%" :picker-options="realReturnDatePicker"></el-date-picker>
			</el-form-item>
			<el-form-item label="金额"  class="inline__">
                <el-input disabled v-model="returnMon.returnMoney"></el-input>
			</el-form-item>
			<el-form-item label="已开发票" class="inline__">
                <el-radio-group v-model="returnRecord.takeInvoice" style="width:100%">
                    <el-radio :label="1">已开发票</el-radio>
                    <el-radio :label="2">未开发票</el-radio>
                    <el-radio :label="3">无需开票</el-radio>
                </el-radio-group>
			</el-form-item>
			<el-form-item label="负责人" class="inline__" prop="principal.empId">
                <el-select filterable v-model="returnRecord.principal" value-key="empId" style="width:100%!important">
					<el-option-group v-for="d in  dept_emps" :key="d.departmentId" :label="d.departmentName">
						<el-option v-for="e in d.deEmp" :key="e.empId" :label="e.empName" :value="e"></el-option>
					</el-option-group>
				</el-select>
			</el-form-item>
            <el-form-item label="付款方式"  class="inline__" prop="paymentMethod.id">
                <el-select v-model="returnRecord.paymentMethod" value-key="id" style="width:100%!important">
					<el-option v-for="item in paymentMethods" :key="item.id" :label="item.name" :value="item"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="备注">
                <el-input v-model="returnRecord.remark" type="textarea"></el-input>
			</el-form-item>
            <el-form-item>
				<el-button type="primary" @click="saveReturnRecord">保存</el-button>
				<el-button @click="$parent.$parent.backToArticleRecordDialogVisible = false">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'backToArticleRecord',
	props: ["contract"],
	data() {
		return {
			paymentMethods:[], 			// 付款方式列表
			returnMon:{returnTimes:{}},				// 回款计划
			dept_emps:[],				// 部门 员工
			returnRecord:{				// 回款记录数据源
				realReturnDate:new Date(),
				takeInvoice:2,
				paymentMethod:this.contract.paymentMethod,
				principal:this.$store.state.user
			},
			rulesReturnRecord:{
				realReturnDate:[
					{required: true, message: '请选择日期', trigger: 'blur'}
				],
				"principal.empId":[
					{required: true, message: '请选择负责人', trigger: 'blur'}
				],
				"paymentMethod.id":[
					{required: true, message: '请选择付款方式', trigger: 'blur'}
				]

			},
			realReturnDatePicker:{}
		}
	},
	methods:{
		initData(){
			// 获取付款方式
			this.axios.get("api/dd/paymentMethods")
			.then(res => {
				this.paymentMethods = res.data
			})
			.catch(err => {
				console.error(err); 
			})
			/* 获取部门员工列表 */
			this.axios.get("api/dept_emps")
			.then(res => {
				this.dept_emps = res.data
			})
			.catch(
				
			)
		},
		saveReturnRecord(){
			// 将回款计划 加入记录中
			this.returnRecord.returnmon = this.returnMon
			// 将合同 加入记录对象中
			this.returnRecord.contract = this.contract
			// 金额修改
			this.returnRecord.returnMoney = this.returnMon.returnMoney
			this.$store.state.saving = true
			this.axios.post("api/in-sale/returnRecord", this.returnRecord)
			.then(res => {
				this.$store.state.saving = false
				this.global.mes_success("回款记录保存成功")
				this.$parent.$parent.backToArticleRecordDialogVisible = false
				// 判断是否从抽屉打开的
				if(this.isDrawer){
					this.$parent.$parent.$refs.contractDrawer.initData()
				}else{
					// 刷新
					this.$parent.$parent.initData()
				}
			})
			.catch(err => {
				this.$store.state.saving = false
				this.global.mes_error("回款记录保存失败，请稍后再试！")
			})
		}
	},
	created(){
		this.initData()
		if(this.returnMon.inv == 2){
			this.returnRecord.takeInvoice = 1
		}
	}	
}
</script>

<style scoped>
#back_to_article_record .el-form-item{width: 100%;margin-bottom: 22px !important;}
.inline__{width:50%!important;display:inline-block}
</style>